<template>
	<view class="search-page">


		<!-- 默认显示热榜 -->
		<view v-if="!searchKeyword" class="hot-section">
			<!-- 热榜标题 -->
			<view class="section-title">
				<text class="title-text" style="    color: #ff0081;">今日热榜</text>
			</view>

			<!-- 热榜列表 -->
			<view class="hot-list">
				<view class="hot-item" v-for="(item, index) in hotList" :key="item.id" @click="goToPostDetail(item)">
					<!-- 排名标识 -->
					<view class="rank-tag {{index < 3 ? 'top' + (index + 1) : ''}}">
						{{index + 1}}
					</view>

					<!-- 帖子内容 -->
					<view class="post-content">
						<view class="post-desc">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getHotList,
		searchPosts
	} from '@/api/xiaoquan.js';

	// 页面数据
	const schoolId = ref(ref(uni.getStorageSync('school_id') || '5'));
	const hotList = ref([]);
	const searchKeyword = ref('');
	const searchLoading = ref(false);
	const searchResultList = ref([]);

	// 加载热榜数据
	const loadHotList = async () => {
		try {
			// 模拟API返回数据
			const response = await getHotList(schoolId.value);
			hotList.value = response.data || [];
		} catch (error) {
			console.error('获取热榜数据失败', error);
		}
	};

	// 搜索处理
	const handleSearch = async () => {
		if (!searchKeyword.value.trim()) return;

		try {
			searchLoading.value = true;

			// 模拟搜索API调用
			await new Promise(resolve => setTimeout(resolve, 800));

			// 模拟搜索结果
			searchResultList.value = [{
					id: 101,
					content: '我想问问，学校快递站那帮人是不是都无法无天了，服务态度这么差，能投诉吗？我实在受不了了。',
					likeCount: 45,
					commentCount: 12,
					createTime: '2023-10-15 09:30:00',
					username: '愉快的刺猬',
					avatar: '/static/image/avatar1.png'
				},
				{
					id: 102,
					content: '有人知道学校的医务室几点开门吗？我早上不太舒服想去看看。',
					likeCount: 32,
					commentCount: 8,
					createTime: '2023-10-14 15:20:00',
					username: '神勇的机器猫',
					avatar: '/static/image/avatar2.png'
				},
				{
					id: 103,
					content: '学校快递站几点开门？晚上几点关门？',
					likeCount: 28,
					commentCount: 6,
					createTime: '2023-10-14 10:45:00',
					username: '完美的招牌',
					avatar: '/static/image/avatar3.png'
				},
				{
					id: 104,
					content: '开学了被褥可以用自己的吗还是统一买？',
					likeCount: 65,
					commentCount: 25,
					createTime: '2023-10-13 16:30:00',
					username: 'LOH Kean Yew',
					avatar: '/static/image/avatar4.png'
				}
			];

		} catch (error) {
			console.error('搜索失败', error);
			uni.showToast({
				title: '搜索失败，请稍后重试',
				icon: 'none'
			});
		} finally {
			searchLoading.value = false;
		}
	};

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 格式化时间
	const formatTime = (time) => {
		const now = new Date();
		const postTime = new Date(time);
		const diffHours = Math.floor((now - postTime) / (1000 * 60 * 60));

		if (diffHours < 1) {
			return '刚刚';
		} else if (diffHours < 24) {
			return `${diffHours}小时前`;
		} else {
			return `${Math.floor(diffHours / 24)}天前`;
		}
	};

	// 前往帖子详情
	const goToPostDetail = (item) => {
		// console.log(item, "-----------")
		// 把点击的帖子基本信息村起来。
		uni.setStorageSync("itemDetail", item)
		// console.log(uni.getStorageSync("itemDetail"))
		uni.navigateTo({
			url: `/package/pages/postDetail/postDetail?id=${item.id}`
		});
	};

	// 页面加载时获取数据
	onMounted(() => {
		loadHotList();
	});
</script>

<style>
	.search-page {
		padding: 0 20rpx 20rpx;
		/* background-color: #f8f8f8; */
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 44rpx;
		background: linear-gradient(to right, #cfe1ff, #e9d7ff);
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 20rpx;
		background-color: #f8f8f8;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.nav-left,
	.nav-right {
		width: 80rpx;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		flex: 1;
	}

	/* 搜索栏样式 */
	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 0 10rpx;
	}

	.search-container {
		flex: 1;
		display: flex;
		align-items: center;
		/* background-color: #fff; */
		border-radius: 40rpx;
		padding: 16rpx 30rpx;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid #eee;
		position: relative;
	}

	.search-container icon {
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		height: 50rpx;
	}

	.search-btn {
		background-color: #409eff;
		color: #fff;
		padding: 16rpx 36rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
	}

	/* 加载动画 */
	.loading-spinner {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.spinner {
		width: 30rpx;
		height: 30rpx;
		border: 3rpx solid #409eff;
		border-top: 3rpx solid transparent;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 无结果提示 */
	.no-result {
		padding: 40rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 搜索结果样式 */
	.search-results {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin: 0 10rpx;
	}

	.result-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		padding: 25rpx 0 15rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	/* 帖子卡片样式 */
	.post-card {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.post-card:last-child {
		border-bottom: none;
	}

	.post-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.username {
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.post-content .desc {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.post-footer {
		display: flex;
		justify-content: flex-end;
	}

	.interaction {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.like-btn,
	.comment-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #999;
	}

	/* 热榜部分样式 */
	.hot-section {
		margin-top: 10rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin: 10rpx;
	}

	/* section标题样式 */
	.section-title {
		padding: 0 30rpx 20rpx;
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 10rpx;
	}

	/* 热榜列表样式 */
	.hot-list {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.hot-item {
		display: flex;
		padding: 25rpx 30rpx;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.hot-item:last-child {
		border-bottom: none;
	}

	.rank-tag {
		width: 50rpx;
		height: 50rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.rank-tag.top1 {
		background-color: #ff4d4f;
		color: #fff;
	}

	.rank-tag.top2 {
		background-color: #ffa940;
		color: #fff;
	}

	.rank-tag.top3 {
		background-color: #ffd666;
		color: #fff;
	}

	.post-content {
		flex: 1;
		overflow: hidden;
	}

	.post-desc {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>